<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Energy - Exploring the Green Future</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">
    <!-- Import custom style file -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- Navigation bar -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="index copy.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="energy.html">New Energy Articles</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="man.html">New Energy Technologies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="new energy.html">New Energy Creations</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="sun.html">Mini Quizzes On New Energy Knowledge</a>
                    </li>
                </ul>
                <!-- Login form - Move to the right side of the navigation bar -->
                <form class="d-flex">
                    <div class="input-group">
                        <button class="btn btn-primary btn-sm" type="button" id="button1">Sign in</button>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <main class="container my-5">
        <!-- Page title and introduction -->
        <div class="text-center">
            <img class="mb-4" src="images/man.jpg" alt="New energy picture" width="200" height="150">
            <h1 class="h3 mb-3 fw-normal">New Energy - Exploring the Green Future</h1>
            <p class="lead">New energy is the future direction of energy development. It includes renewable energy sources such as solar, wind, and hydropower. It is environmentally friendly and can effectively reduce carbon emissions.</p>
        </div>

        <!-- Introduction to new energy types -->
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <!-- Solar energy -->
            <div class="col">
                <div class="card h-100">
                    <img src="images/manba.jpg" class="card-img-top" alt="Solar energy" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Solar Energy</h5>
                        <p class="card-text">Solar energy is an inexhaustible and clean energy source. Through solar panels, solar energy can be converted into electricity, which is widely used in households, industries, and public facilities.</p>
                    </div>
                </div>
            </div>
            <!-- Wind energy -->
            <div class="col">
                <div class="card h-100">
                    <img src="images/laoda.jpg" class="card-img-top" alt="Wind energy" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Wind Energy</h5>
                        <p class="card-text">Wind energy uses wind turbines to convert wind energy into electricity. Wind farms are usually built in areas with abundant wind resources, such as coastal areas and grasslands.</p>
                    </div>
                </div>
            </div>
            <!-- Hydropower -->
            <div class="col">
                <div class="card h-100">
                    <img src="images/OIP-C.jpg" class="card-img-top" alt="Hydropower" height="200">
                    <div class="card-body">
                        <h5 class="card-title">Hydropower</h5>
                        <p class="card-text">Hydropower generates electricity by building hydroelectric power stations and utilizing the energy of water flow. Hydroelectric power stations have the characteristics of stable power generation and high efficiency and are an important form of new energy.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact us -->
        <div class="mt-5 text-center">
            <h2 class="h3 mb-3 fw-normal">Contact Us</h2>
            <p>If you are interested in new energy, please feel free to contact us.</p>
            <button class="btn btn-primary w-25 py-2" type="button">Contact Us</button>
        </div>

        <!-- Copyright information -->
        <p class="mt-5 mb-3 text-body-secondary text-center">&copy; 2024–2030</p>
    </main>

    <script defer src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.bundle.min.js"
        integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq"></script>
</body>

</html>